// 导入必要的库和工具
import { defineStore } from 'pinia'; // Pinia状态管理库
import { getLeftData } from '@/api/earlyWarning'; // API请求方法
import { ref, reactive } from 'vue'; // Vue响应式API
import { siteInfo } from '@/constants/components/siteInfo'; // 站点信息常量
import { useCesiumPoints } from '@/hooks/useCesiumPoints'; // Cesium地图点相关hook
import { mapBackendData, type moduleInfo } from '@/utils/mapBackendData';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { useDialogStore } from '@/store/modules/useDialogStore';

interface TableRow {
  name: string;
  code: string;
  typeName: string;
  inPressure: string;
  outPressure: string;

  [key: string]: any;
}

// 站点类型映射配置(中文名称与后端字段的映射关系)
const SITE_TYPE_MAPPING = {
  '门站': { countKey: 'gateStationCount', dataKey: 'gateStationData' },
  '调压站': { countKey: 'pressureRegulatingStationCount', dataKey: 'pressureRegulatingStationData' },
  '调峰储备站': { countKey: 'peakShavingReserveStationCount', dataKey: 'peakShavingReserveStationData' },
  '重点工商业户站': { countKey: 'industrialCommercialStationCount', dataKey: 'industrialCommercialStationData' }
} as const; // as const确保类型推断为字面量类型
//用来保存当前类型 然后调取当前类型的数据 并且渲染到列表弹窗上
const currentType = ref<number>(0);
// 定义Pinia store
export const useSiteInfoStore = defineStore('siteInfo', () => {
  const { flyTo } = useDialogStore();
  // 响应式站点数据(初始值为导入的常量)
  const siteInfoData = ref<moduleInfo[]>(siteInfo);
  // 响应式数据源对象(用于存储地图点数据)
  const dataSources = reactive<Record<string, any[]>>({});
  // 站点信息对象
  const siteInfos = ref<TableRow[]>([]);
  //站点信息对话框变量
  const siteInfoDialog = ref<boolean>(false);
  // 从hook中解构需要的方法
  const { addPoint, clearAllPoints } = useCesiumPoints();
  const { openDialog } = useDialogStore();
  //打开站点详情
  const openSiteInfo = () => {
    siteInfoDialog.value = true;
  };
  /**
   * 切换站点实体显示状态
   * @param item 站点信息对象
   */
  const toggleSiteEntities = (item: moduleInfo) => {
    flyTo({ longitude: 117.140035075, latitude: 36.798747059 }, 400000);
    const siteName = item.name;
    item.clickStatus = !item.clickStatus; // 切换点击状态
    openDialog('siteModule');
    currentType.value = item.id;
    if (item.clickStatus) {
      dataSources[siteName] = item.list.map((point) => addPoint(point, siteName, COMPONENT_TITLES.SITE_INFO));
    } else {
      // 如果已存在该站点的数据源
      if (dataSources[siteName]) {
        clearAllPoints(dataSources[siteName]); // 清除所有点
        delete dataSources[siteName]; // 删除数据源
        return;
      }
    }
  };

  /**
   * 获取站点数据
   */
  const fetchSiteData = async () => {
    try {
      const response = await getLeftData({ type: 'siteInfo' }); // 发起API请求
      // 更新站点数据(经过映射处理)
      siteInfoData.value = mapBackendData(siteInfo, response.data.siteInfo, SITE_TYPE_MAPPING);
      //保存siteInfos
      siteInfos.value = response.data.siteInfo.siteInfos;
    } catch (error) {
      console.error('获取站点数据失败:', error);
      // 可以考虑添加错误处理或UI反馈状态
    }
  };
  //定义一个初始化的方法 用于一个全局的按钮清楚全部点位 并且点击的元素颜色复原
  const initSiteModule = () => {
    clearAllPoints(Object.values(dataSources).flat());
    siteInfoData.value.forEach((item) => {
      item.clickStatus = false;
    });
  };

  onMounted(async () => {
    await fetchSiteData();
  });
  // 暴露给外部使用的属性和方法
  return {
    siteInfoData, // 站点数据
    siteInfoDialog, // 站点详情对话框状态
    siteInfos, // 站点信息对象
    currentType, // 当前类型
    openSiteInfo, // 打开站点详情方法
    toggleSiteEntities, // 切换实体显示方法
    initSiteModule
  };
});
